<%@ page language="java" contentType="text/html; charset=UTF-8"
         isELIgnored="false" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib uri="/mytag" prefix="yjd" %>
<script src="${requestScope.FPWEB.staticRootPath }/Js/Plugins/Echarts/echarts-all.js"></script>

<div class="wrap">
    <div class="J_Chart_Panel">
        <div class="h_a1" style="clear: both;">
            <span class="title">渠道效果报表</span>
        </div>
        <form method="post" id="sumary" autocomplete="off"
              action="${requestScope.FPWEB.rootPath }/market/channel/statics/index${requestScope.FPWEB.urlStuff}">
            <div class="search_type cc">
                <label>渠道：</label>
                <select name="channel" class="mr10">
                    <c:forEach items="${channel }" var="item" varStatus="i">
                        <option value="${item.id }" <c:if test="${channelName == item.channel_name}">selected</c:if>>${item.channel_name }</option>
                    </c:forEach>
                </select>

                <label>用户注册日期：</label>
                <input type="input" max="${end }" min="${start }" name="selectedStart" class="input length_1 mr10 J_date"
                       value="${selectedStart }">
                <label> - </label>
                <input type="input" max="${end }" min="${start }" name="selectedEnd" class="input length_1 mr10 J_date"
                       value="${selectedEnd }">

                <label>转化周期:</label>
                <select name="transferPeriod" class="mr10">
                    <option value="0">请选择</option>
                    <option value="1" <c:if test="${transferPeriod == 1}">selected</c:if>>1天</option>
                    <option value="2" <c:if test="${transferPeriod == 2}">selected</c:if>>2天</option>
                    <option value="3" <c:if test="${transferPeriod == 3}">selected</c:if>>3天</option>
                    <option value="4" <c:if test="${transferPeriod == 4}">selected</c:if>>4天</option>
                    <option value="5" <c:if test="${transferPeriod == 5}">selected</c:if>>5天</option>
                    <option value="6" <c:if test="${transferPeriod == 6}">selected</c:if>>6天</option>
                    <option value="7" <c:if test="${transferPeriod == 7}">selected</c:if>>7天</option>
                    <option value="14" <c:if test="${transferPeriod == 14}">selected</c:if>>14天</option>
                    <option value="30" <c:if test="${transferPeriod == 30}">selected</c:if>>30天</option>
                    <option value="60" <c:if test="${transferPeriod == 60}">selected</c:if>>60天</option>
                    <option value="90" <c:if test="${transferPeriod == 90}">selected</c:if>>90天</option>
                </select>

                <%--<button id="search" type="button" class="btn length_1">搜索</button>--%>
                <button type="submit" class="btn btn_submit length_1">搜索</button>
            </div>
        </form>
    </div>

    <div>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="divFunnel" style="height:400px"></div>

        <hr/>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="divLine" style="height:400px"></div>

        <hr/>
        <div class="h_a">渠道数据异常记录</div>
        <div class="table_list">
            <table id="invalidData" width="100%">
                <thead>
                    <tr>
                        <td width="50">开始时间</td>
                        <td width="50">结束时间</td>
                        <td width="50">备注</td>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${invalidData }" var="data">
                        <tr>
                            <td>${data.start_date} </td>
                            <td>${data.end_date} </td>
                            <td>${data.content} </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>

    </div>

    <script type="text/javascript">
        YJD.use('AppAdminCommon');
        YJD.use('AppBICommon');

        /*漏斗图 start*/
        var optionFunnel = {
            title : {
                text: '渠道转化率',
                subtext: '来源：${channelName}'
            },
            tooltip : {
                hideDelay:500,
                trigger: 'item',
                formatter: function (params,ticket,callback) {
                    var res = '';
                    if(params.data.name.search("用户注册") != -1){
                        res = '注册人数:' + params.data.total;
                    } else {
                        res = '转换率:' + params.data.rate + '%';
                    }
                    setTimeout(function (){
                        callback(ticket, res);
                    }, 0);

                    return 'loading';
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            series : [
                {
                    name:'',
                    type:'funnel',
                    width: '60%',
                    data:${funnelData}
                }
            ]
        };

        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('divFunnel'));
        // 为echarts对象加载数据
        myChart.setOption(optionFunnel);
        /*漏斗图 end*/

        /*趋势图 start*/
        var optionLine = {
            title : {
                text: '趋势图',
                subtext: '来源：${channelName}'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['注册>开通存管','开通存管>首次充值','首次充值>首次投资','总转化率']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ${dateList}
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} %'
                    }
                }
            ],
            series : [
                {
                    name:'注册>开通存管',
                    type:'line',
                    data:${zcToktcg}
                },
                {
                    name:'开通存管>首次充值',
                    type:'line',
                    data:${ktcgTosc}
                },
                {
                    name:'首次充值>首次投资',
                    type:'line',
                    data:${scTost}
                },
                {
                    name:'总转化率',
                    type:'line',
                    data:${all}
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('divLine'));
        // 为echarts对象加载数据
        myChart.setOption(optionLine);
        /*趋势图 end*/

    </script>
</div>